<template>
    <div>
     <mt-header  title='登录'>
        <mt-button icon='back' slot='left'  @click="$router.back()">返回</mt-button>
     </mt-header>
     <mt-field  label='用户名'  placeholder="请输入用户名" @blur.native.capture='checkName'   v-model="name"  :state='nameState'></mt-field>
     <mt-field  label='密码'  placeholder="请输入密码"   v-model="pwd"  @blur.native.capture="pwdCheck"   :state='pwdState'></mt-field>
     <mt-button  type='primary'   size='large'  @click.native='checkForm'>登录</mt-button>
    </div>
</template>

<script>
    export default {
        watch:{
            name(){
                this.checkName()
            },
            pwd(){
                this.pwdCheck()
            }
        },
        methods: {
            back(){
                self.location=document.referrer
            },
            checkForm(){
                if(this.nameState=='success' && this.pwdState=='success'){
                    console.log('登陆成功');
                }else{
                    console.log('登录失败');
                }
                let params=`username=${this.name}&userpwd=${this.pwd}`
                    this.axios.post('/denglu/login',params).then(res=>{
                        console.log(res);
                        if(res.data.code==200){
                            //调用mutations的方法,修改vuex中的用户名
                            //  this.$store.commit('updateName',this.name)
                            console.log('store:',this.store);
                        //    this.$store.state.username=this.name
                            this.$router.push('/')
                        }else{
                            this.$messagebox('提示','密码输入错误')
                        }
                    })
            },
            pwdCheck(){
                let exp=/^\d{6}$/
                if(exp.test(this.pwd)){
                    this.pwdState='success'
                }else{
                    this.pwdState='error'
                }
            }
            ,
            checkName() {
                let exp=/^\w{8,14}$/
                if(exp.test(this.name)){
                    this.nameState='success'
                }else{
                    this.nameState='error'
                }
            }
        },
     data() {
        return {
            name: '',
            pwd:'',
            nameState:'',
            pwdState:'',
        }
     },   
    }
</script>

<style lang="scss" scoped>

</style>